<template>
    <div class="loginWrap">
        <div class="login">
            <div class="img">
                <img src="../assets/images/loginLogo.png" alt="">
            </div>
            <form>
                <input type="text" placeholder="用户名" v-model = "name">
                <input type="password" placeholder="密码" v-model = "pwd">
            </form>
            <p>
                新用户登录即自动注册，并表示已同意
                <a href="" style="color:#2395FF">《用户服务协议》</a>
            </p>
            <p>
                <router-link to = "/register"><span class ='changeRouter'>注册</span></router-link>
            </p>
            <button id="btn" @click="loginFn" class="mint-button mint-button--default mint-button--large">登录</button>
            <span class="mint-toast-text" style="padding-top: 0px;"></span>
            <p style="text-align:center;"><router-link to="/about" style="color:#999999;">关于我们</router-link></p>
        </div>
    </div>
</template>

<script>
import 'mint-ui/lib/style.css';
import qs from 'qs';
export default {
    // components:'Toast',
    data(){
        return {
            name:'',
            pwd:''
        }
    },
    methods: {
        loginFn(){
            console.log(this.name,this.pwd);
        //    this.$axios.post('http://10.36.134.112:3000/login',{
           this.$axios.post('http://127.0.0.1:3000/login',{
            params:{
                username:this.name,
                password:this.pwd
            }, //{
                //post请求的时候，axios接受3个参数，第二个参数里面需要的参数，第三个参数是config
                //请求发送出去之前，做一次数据的转换
                //(xx:xx,xx:xx)=> xx=xx&xx
                // transformrequest(data){
                //     return qs.stringify(data);
                // }
           }).then(res =>{
               var result = res.data;
               if(result.code==1){
                 alert("登录成功");
                var localstorage = window.localStorage;
                localstorage.setItem('uname',this.name);
                this.$router.push('/home');
               }else{
                    alert("登录失败",result.msg);
               }
           })
        }
    }
}
</script>
<style scoped>
    .loginWrap{
        height:100%;
        background:#fff;
    }
    .changeRouter{
        float:right;
        color:#999;
    }
    a {
        text-decoration:none;
    }
    input,button {
        border: 0;
        outline: none;
    }
    .login {
        width: 3rem;
        margin: 0 auto 0;
        color: #999999
    }
    .login .img {
        text-align: center;
    }
    .login img {
        margin-top:0.4rem;
        width: 1.5rem;
        height: .6rem;
    }
    .login form {
        position: relative;
        margin-top: .2rem;

    }
    form input {
        width: 100%;
        height: .48rem;
        margin-bottom: .2rem;
        border: 1px solid #dddddd;
        border-radius: .06rem;
        padding: .8em;

    }
    form button {
        position: absolute;
        top: .15rem;
        right: .1rem;
        background: white;
        color: #999999
    }
    #btn {
        width: 3rem;
        height: .42rem;
        color: white;
        border-radius: .05rem;
        background: #4CD96F;
        margin: .2rem 0;
        font-size: .18rem;
    }
</style>

